<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: 'index' }">
          生产计划统计详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_top">
        <StrokeTitle title="实际计划分类完成度" class="float margin" style="width: 36.5%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
          </div>
          <div class="Echarts">
            <div class="calculagraph_left">
              <Ring style="width:45%;height:80%" />
              <div class="label">总计划</div>
            </div>
            <div class="calculagraph_right">
              <StrokeItem title="消耗总量" number="1423234" />
              <StrokeItem title="上月" number="32423" />
              <StrokeItem title="环比" number="12%" />
            </div>
          </div>
        </StrokeTitle>
        <StrokeTitle title="实际计划分类统计" class="float margin" style="width: 36.5%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
          </div>
          <XRow class="Echarts"></XRow>
        </StrokeTitle>
        <StrokeTitle title="计划产能占比" class="float margin" style="width: 24%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
            <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
          <div class="flex_center Echarts">
            <PieImg legendLeft="56%" itemWidth="0.94" length="5"/>
          </div>
        </StrokeTitle>
      </div>
      <div class="content_top">
        <StrokeTitle title="销售计划与实际计划比值统计" class="float margin" style="width: 36.5%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
          </div>
          <div class="flex_center Echarts">
            <div class="water_box">
              <div class="water flex_center">1.1</div>
              <div class="label">销售产值：实际产值</div>
              <div class="backBor"></div>
            </div>
            <!-- <Water  style="width:38%"/> -->
            <MoreDirection :data="data3" :legendData="['已完成']" style="height: calc(100% - 0px); width: 64%" />
          </div>
        </StrokeTitle>
        <StrokeTitle title="各基地计划产量占比" class="float margin" style="width: 36.5%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
          </div>
          <div class="flex_center Echarts">
            <PieImg legendLeft="41%" length="10" itemWidth="0.94" cirLeft="0.7"/>
          </div>
        </StrokeTitle>
        <StrokeTitle title="未完成计划产成品占比" class="float margin" style="width: 24%">
          <div class="flex_center">
            <ElementRadio :options="RadioOptions" v-model="model" :isButton="true" @change="radioChange" />
            <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
          <div class="flex_center Echarts">
             <MoreRing legendLeft="56%" length="5" :data="[{name:'标题q',value:22},{name:'标题sdds',value:33},{name:'标题wdw',value:11}]"/>
          </div>
        </StrokeTitle>
      </div>
      <div class="content_top">
        <StrokeTitle title="当月产能统计" class="float margin" style="width: 99%">
          <div class="flex_center">
            <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList" />
          </div>
          <MoreDirection :data="data3" :legendData="['已完成']" barWidth="24" style="height: calc(100% - 50px)" />
        </StrokeTitle>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: "month",
      RadioOptions: [
        {
          value: "month",
          label: "当月",
        },
        {
          value: "year",
          label: "当季",
        },
        {
          value: "zi",
          label: "自定义",
        },
      ],
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
      data3: [
        { name: "已签收", value1: 33 },
        { name: "配送中", value1: 53 },
        { name: "已出库", value1: 78 },
        { name: "采购中", value1: 12 },
        { name: "接单中", value1: 90 },
      ],
    };
  },
  methods: {
    radioChange() {},
  },
};
</script>


<style lang="scss" scoped>
.productionDesign_box {
  .content {
    .content_top {
      //   background: red;
      width: 100%;
      height: 30.8%;
    }
    .Echarts {
      height: calc(100% - 50px);
      .water_box {
        width: 33%;
        height: 95%;
        // background: red;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        .water {
          background: url("../../assets/images/echarts/water (2).png");
          background-size: 100% 100%;
          width: 120px;
          height: 120px;
          font-size: 36px;
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
          font-weight: 700;
          text-align: left;
          color: #ffffff;
        }
        .label {
          margin-top: 20px;
        }
        .backBor {
          background: url("../../assets/images/echarts/11.png");
          background-size: 100% 100%;
          position: absolute;
          right: 0;
          width: 1px;
          height: 80%;
          top: 5%;
        }
      }
      .calculagraph_right,
      .calculagraph_left {
        width: 40%;
        height: 100%;
        // background: red;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        float: left;
        margin-left: 8%;
      }
      .calculagraph_right {
        align-items: flex-start;
        justify-content: center;
        width: 35%;
        height: 95%;
        margin-left: 0%;
      }
    }
  }
}
</style>